<template>
  <a-modal
    title="选择物料"
    :width="900"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <template>
        <div>
          <a-card :bordered="false" :bodyStyle="tstyle">
            <div class="table-page-search-wrapper">
              <a-form layout="inline">
                <a-row :gutter="48">
                  <a-col :md="8" :sm="24">
                    <a-form-item label="编码">
                      <a-input v-model="queryParam.code" allow-clear placeholder="请输入编码"/>
                    </a-form-item>
                  </a-col>
                  <a-col :md="8" :sm="24">
                    <a-form-item label="型号">
                      <a-input v-model="queryParam.model" allow-clear placeholder="请输入型号"/>
                    </a-form-item>
                  </a-col>
                  <a-col :md="8" :sm="24" >
                    <span class="table-page-search-submitButtons">
                      <a-button type="primary" @click="$refs.table.refresh(true)" >查询</a-button>
                      <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
                    </span>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </a-card>
          <a-card :bordered="false" :bodyStyle="tstyle">
            <s-table
              ref="table"
              size="small"
              :scroll="{ x: 800, y: 400 }"
              :columns="columns"
              :data="loadData"
              :alert="false"
              :rowKey="(record) => record.code"
              :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: selectType, getCheckboxProps: getCheckboxProps, fixed: true }"
            >
              <span slot="brandscopedSlots" slot-scope="text">
                {{ 'material_brand' | dictType(text) }}
              </span>
              <span slot="typescopedSlots" slot-scope="text">
                {{ 'material_type' | dictType(text) }}
              </span>
              <span slot="manageTypescopedSlots" slot-scope="text">
                {{ 'material_manage_type' | dictType(text) }}
              </span>
              <span slot="isEnablescopedSlots" slot-scope="text">
                {{ 'whether' | dictType(text) }}
              </span>
              <span slot="unitscopedSlots" slot-scope="text">
                {{ 'material_unit' | dictType(text) }}
              </span>
            </s-table>
          </a-card>
        </div>
      </template>
    </a-spin>
  </a-modal>
</template>

<script>
  import { STable } from '@/components'
  import { materialPage, materialDelete } from '@/api/modular/main/base/material/materialManage'
  import { getCategoryTree } from '@/api/modular/main/base/material/materialCategoryManage'
  export default {
    components: {
      STable
    },
    data () {
      return {
        visible: false,
        confirmLoading: false,
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '编码',
            align: 'center',
            width: 250,
            ellipsis: true,
            dataIndex: 'code'
          },
          {
            title: '名称',
            align: 'center',
            width: 250,
            ellipsis: true,
            dataIndex: 'name'
          },
          {
            title: '型号',
            align: 'center',
            width: 250,
            ellipsis: true,
            dataIndex: 'model'
          },
          {
            title: '品牌',
            align: 'center',
            width: 150,
            ellipsis: true,
            dataIndex: 'brand',
            scopedSlots: { customRender: 'brandscopedSlots' }
          },
          {
            title: '类型',
            align: 'center',
            width: 100,
            ellipsis: true,
            dataIndex: 'type',
            scopedSlots: { customRender: 'typescopedSlots' }
          },
          {
            title: '分类',
            align: 'center',
            width: 150,
            ellipsis: true,
            dataIndex: 'categoryName'
          },
          {
            title: '单位',
            align: 'center',
            width: 100,
            ellipsis: true,
            dataIndex: 'unit',
            scopedSlots: { customRender: 'unitscopedSlots' }
          },
          {
            title: '管理类型',
            align: 'center',
            width: 100,
            ellipsis: true,
            dataIndex: 'manageType',
            scopedSlots: { customRender: 'manageTypescopedSlots' }
          }
        ],
        tstyle: { 'padding-bottom': '0px', 'margin-bottom': '0px', 'padding': '5px 24px 5px 24px' },
        loadData: parameter => {
          return materialPage(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        },
        brandData: [],
        typeData: [],
        unitData: [],
        categoryTree: [],
        isEnableData: [],
        selectedRowKeys: [],
        selectedRows: []
      }
    },
    props: {
      selectedRowsData: { // 接收已选中的数据，做回显使用
        type: Array,
        default() {
          return []
        }
      },
      selectedRowKeysData: {
        type: Array,
        default() {
          return []
        }
      },
      selectType: { // 选择类型，多选checkbox，多选radio
        type: String,
        default() {
          return 'checkbox'
        }
      }
    },
    created () {
      const brandOption = this.$options
      this.brandData = brandOption.filters['dictData']('material_brand')
      const typeOption = this.$options
      this.typeData = typeOption.filters['dictData']('material_type')
      const isEnableOption = this.$options
      this.isEnableData = isEnableOption.filters['dictData']('whether')
      const unitOption = this.$options
      this.unitData = unitOption.filters['dictData']('material_unit')
      this.getCategoryTree()
    },
    activated () {
    },
    watch: {
      selectedRowKeysData: function (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      }
    },
    methods: {
      // 初始化方法
      add () {
        // this.selectedRowKeys = [...this.selectedRowKeysData]
        // this.selectedRows = [...this.selectedRowsData]
        this.visible = true
      },
      /**
       * 获取分类树，并加载于表单中
       */
      getCategoryTree () {
        getCategoryTree().then((res) => {
          this.formLoading = false
          if (!res.success) {
            this.categoryTree = []
            return
          }
          this.categoryTree = res.data
        })
      },
      materialDelete (record) {
        materialDelete(record).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败:' + res.message)
          }
        })
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      getCheckboxProps(record) {
        return record => ({
          props: {
            defaultChecked: this.selectedRowKeys.includes(record.code)
          }
        })
      },
      /**
       * 提交表单
       */
      handleSubmit () {
        this.$emit('sure', this.selectedRows, this.selectedRowKeys)
        this.handleCancel()
      },
      handleCancel () {
        this.visible = false
        this.queryParam = {}
        this.selectedRowKeys = []
        this.selectedRows = []
        this.$refs.table.refresh(true)
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
  .ant-modal-body {
    padding: 20px 20px 0px 20px;
  }
</style>
